<template>
  <div class="table">
    <div class="add_btn">
      <slot name="header"></slot>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-bind="childrenProps"
    >
      <el-table-column v-if="showSelectColumn" type="selection" align="center" width="50px" />
      <el-table-column v-if="showIndexColumn" type="index" label="序号" width="60px" align="center" />
      <template v-for="item in tableColumns" :key="item.label">
        <el-table-column v-bind="item" align="center" show-overflow-tooltip>
          <template #default="scope">
            <slot :name="item.slotName" :currentrow="scope.row">
              {{ scope.row[item.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <slot name="footer" v-if="showFooter">
      <el-pagination
        v-model:current-page="baseParams.offset"
        v-model:page-size="baseParams.size"
        :page-sizes="[5, 10, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
import eventBus from '@/utils/eventBus'
export default defineComponent({
  props: {
    getData: {
      type: Function,
      required: true
    },
    tableColumns: {
      type: Array,
      required: true
    },
    showIndexColumn: {
      type: Boolean,
      default: false
    },
    showSelectColumn: {
      type: Boolean,
      default: false
    },
    childrenProps: {
      type: Object,
      default: () => ({})
    },
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  emits: ['selectionChange'],
  setup(prop, { emit }) {
    const listenOnEvent = () => {
      eventBus.on('fetchData', (params) => {
        allParams = { ...baseParams, ...params }
        fetchData()
      })
    }
    onMounted(() => {
      listenOnEvent()
      fetchData()
    })
    onBeforeUnmount(() => {
      eventBus.off('*')
    })

    let tableData: any = ref([])
    let totalCount = ref(0)
    const baseParams = {
      offset: 0,
      size: 10
    }
    let allParams = { ...baseParams }
    const fetchData = () => {
      prop.getData(allParams).then((res) => {
        tableData.value = res.data.list
        if (res.data.totalCount) {
          totalCount.value = res.data.totalCount
        }
      })
    }
    const handleSizeChange = (val) => {
      allParams.size = val
      fetchData()
    }
    const handleCurrentChange = (val) => {
      console.log(val)
      allParams.offset = val
      fetchData()
    }
    const handleSelectionChange = (val: any) => emit('selectionChange', val)
    return {
      tableData,
      totalCount,
      baseParams,
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange,
      fetchData
    }
  }
})
</script>

<style scoped lang="less">
.table {
  position: relative;
  .el-pagination {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 10px;
  }
  .add_btn {
    text-align: left;
    margin-bottom: 10px;
  }
}
</style>
